<template>
  <div class="contain">
    <!-- <div id="viewDiv" class=" "> -->
    <div id="viewDiv2"></div>
    <div class="title">
      <div
        class="d-flex"
        style="padding-top: 70px; width: 980px; cursor: pointer"
      >
        <div class="title_backgd d-flex" @click="projectFunc().goback"></div>
      </div>

      <div class="title_text"><div>海绵城市一张图</div></div>
      <div class="title_time">
        <div
          style="
            margin-left: 450px;
            font-size: 20px;
            font-family: 'OPPOSans';
            color: rgba(230, 253, 255, 0.5);
          "
        >
          <!-- 查询内容： -->
        </div>
        <div
          style="
            border: #5ce1ff solid 1px;
            border-radius: 20px;
            background-color: rgba(20, 67, 81, 0.9);
          "
        >
          <!-- <el-input
            v-model="searchValue"
            class="m-1"
            size="small"
            placeholder="请输入"
          >
            <i slot="prefix" class="el-icon-user" @click="test"></i>
            <i slot="prefix">
              <img
                style="width: 16px; height: 16px"
                src="../assets/image/underGround/back.png"
              />
            </i>
          </el-input> -->
        </div>
        <div
          style="
            font-size: 32px;
            font-family: 'OPPOSans';
            font-weight: bold;
            color: #e6fdff;
          "
        >
          {{ nowTime }}
        </div>
        <div style="font-size: 28px; font-family: 'OPPOSans'; color: #e6fdff">
          {{ nowdate }}
        </div>

        <div style="font-size: 28px; font-family: 'OPPOSans'; color: #e6fdff">
          | {{ weekday }}
        </div>
        <div @click="outLogin" style="width: 35px; height: 35px">
          <img
            src="../assets/image/svg/out.png"
            alt=""
            style="width: 35px; height: 35px"
          />
        </div>
      </div>
      <div></div>
    </div>
    <!-- 左图表 -->
    <div class="other">
      <modelTemplete class="w-100 h-100">
        <template #top style="left: 0px">
          <component :is="calcComponent(1)"></component>
        </template>
        <template #middle>
          <component :is="calcComponent(2)"></component>
        </template>
        <template #bottom>
          <component :is="calcComponent(3)"></component>
        </template>
      </modelTemplete>
    </div>
    <!-- 右图表 -->
    <div class="other" style="right: 0px">
      <modelTemplete>
        <template #top>
          <component :is="calcComponent(4)"></component>
        </template>
        <template #middle>
          <component :is="calcComponent(5)"></component>
        </template>
        <template #bottom>
          <component :is="calcComponent(6)"></component>
        </template>
      </modelTemplete>
    </div>
    <!-- 老图例 -->
    <!-- <div class="label2">
      <div
        v-for="(item, index) in labelList[activeItem]"
        class="label_item"
        @click="
          (labelList[activeItem][index].show =
            !labelList[activeItem][index].show),
            useFunc().controlByType(item.text, item.show)
        "
      >
        <div style="width: 80px; height: 50px; padding: 5px 20px 5px 20px">
          <img style="width: 40px; height: 40px" :src="item.img" alt="" />
        </div>
        <div :class="{ label_text: item.show, label_textActive: !item.show }">
          {{ item.text }}
        </div>
      </div>
    </div> -->

    <div class="label">
      <div
        class="label_title d-flex justify-content-between p-3"
        @click="labelVisible = !labelVisible"
      >
        <div>图例</div>
        <div :class="labelVisible ? 'label_icon' : 'label_iconup'"></div>
      </div>
      <div
        v-for="(bigItem, index) in labelListBar[activeItem]"
        style="color: #e6fdff; font-size: 20px; padding: 5px 20px 0 20px"
        v-if="labelVisible"
      >
        <div style="line-height: 45px; height: 45px">{{ bigItem.label }}</div>
        <div
          v-for="(smallitem, samllindex) in (bigItem.value as any)"
          class="label_item"
        >
          <div style="width: 80px; height: 50px; padding: 0px 20px 5px 12px">
            <img
              style="width: 50px; height: 55px"
              :src="smallitem.img"
              alt=""
            />
          </div>
          <div>
            {{ smallitem.text }}
          </div>
        </div>
      </div>
    </div>

    <!-- 图层管理 -->
    <div
      class="layerControl"
      @click="layerControlShow = !layerControlShow"
    ></div>

    <div class="layerList" v-if="mapLoaded">
      <div class="layerList_item m-3" v-show="layerControlShow">
        <elTree
          :mapLoaded="mapLoaded"
          :activeNav="activeNav"
          :title="'海绵城市'"
        ></elTree>
      </div>
    </div>
    <div class="seatchSelect" v-if="activeItem === 0 || activeItem === 2">
      <div style="border: 1px solid #4fb9cf">
        <proSelect
          :optionsData="getSeatchData(activeItem)"
          :defaultSelectValue="'1'"
          v-model:select-value="activeSelectValue"
          :width="250"
          :size="'large'"
        >
        </proSelect>
      </div>
    </div>
    <!-- 模糊搜索 -->
    <div
      class="search d-flex"
      v-if="activeItem === 0 || activeItem === 2 || activeItem === 1"
    >
      <el-button
        type="primary"
        :icon="Plus"
        v-if="false"
        @click="addJSProject"
        style="height: 100%; margin-right: 10px"
        >新增项目</el-button
      >

      <div
        style="
          border: 1px solid #4fb9cf;
          display: flex;
          background-color: #30525f;
        "
      >
        <div>
          <el-input v-model="input" style="width: 320px; height: 66px" />
        </div>
        <div style="width: 50px">
          <img
            @click="searchGEO()"
            src="../assets/image/svg/search.png"
            class="search_icon"
          />
        </div>
      </div>
    </div>
    <div class="map-overlay"></div>
    <!-- 下方导航 -->
    <div class="searchData">
      <div
        v-for="item in seatchData"
        class="searchData_item"
        @click="jumpDetail(item)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="bottomNav">
      <!-- <div
          v-for="(item, index) in navList"
          @click="(activeNav = item), (activeItem = index)"
          style="width: 8%; display: flex; justify-content: space-around"
        >
          <div>
            <div
              :style="{ backgroundImage: 'url(' + item.bk + ')' }"
              :class="activeItem == index ? 'itemActive' : 'itemUnActive'"
            ></div>
            <div>
              {{ item.title }}
            </div>
          </div>
        </div> -->
    </div>

    <div class="bottomitem">
      <div
        v-for="(item, index) in navList"
        @click="
          (activeNav = item),
            (activeItem = index),
            navCilck(index),
            closeClick()
        "
        style="width: 8%; display: flex; justify-content: space-around"
      >
        <div>
          <div
            :style="{ backgroundImage: 'url(' + item.bk + ')' }"
            :class="activeItem == index ? 'itemActive' : 'itemUnActive'"
          ></div>
          <div :class="activeItem == index ? 'Activetext' : 'UnActivetext'">
            {{ item.title }}
          </div>
        </div>
      </div>
    </div>
    <div class="state" id="stateShow">
      <div class="box">
        <div class="box-wrap">
          <div class="poptitle">
            <div class="poptitle_text" id="title"></div>
            <div class="clopoptitle_close" @click="closeClick()">X</div>
          </div>
          <div class="content" style="max-height: 1000px; overflow-y: auto">
            <div class="popInfo">
              <div class="pop_distribute"></div>
              <div class="pop_value"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="state" id="device">
      <div class="box">
        <div class="box-wrap">
          <div class="poptitle">
            <div class="poptitle_text" id="title"></div>
            <div class="clopoptitle_close" @click="closeClick()">X</div>
          </div>
          <div
            class="d-flex w-100 justify-content-around"
            style="height: 60px; padding: 10px"
          >
            <div
              id="left_bar"
              class="device_item"
              style="cursor: pointer"
              @click="useFunc().tabClick(1), (activeTab = 1)"
              :class="{ active: activeTab === 1 }"
            ></div>
            <div
              id="right_bar"
              class="device_item"
              style="cursor: pointer"
              @click="useFunc().tabClick(2), (activeTab = 2)"
              :class="{ active: activeTab === 2 }"
            ></div>
          </div>

          <div class="content" style="max-height: 1000px; overflow-y: auto">
            <div class="popInfo">
              <div class="pop_distribute"></div>
              <div class="pop_value"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <Dialog />
  <!-- </div> -->
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { projectFunc } from "@/hook/projectFunc";
import modelTemplete from "@/components/project/modelTemplete.vue";
import back from "@/assets/image/underGround/back.png";
import zhgl_gx from "@/assets/image/underGround/zhgl_gx.png";
import zhgl_length from "@/assets/image/underGround/zhgl_length.png";
import bar_01 from "@/assets/image/underGround/bar_01.png";
import bar_02 from "@/assets/image/underGround/bar_02.png";
import bar_03 from "@/assets/image/underGround/bar_03.png";
import bar_04 from "@/assets/image/underGround/bar_04.png";
import elTree from "@/components/project/elTree.vue";
import Epsg4548TilingScheme from "@/utils/epsgTanselayte.js";
import API from "@/network/api";
import _ from "lodash";
import { W3d } from "@/assets/test/W3d";
import { number } from "echarts";
import { useOptions } from "@/hook/useOptions";
import proSelect from "@/components/project/proSelect.vue";

import sblx from "./spone/detection/sblx/sblx.vue";
import sbyxzt from "./spone/detection/sbyxzt/sbyxzt.vue";
import yjxx from "./spone/detection/yjxx/yjxx.vue";
import shjpj from "./spone/detection/shjpj/shjpj.vue";
import ysly from "./spone/detection/ysly/ysly.vue";
import jxkh from "./spone/detection/jxkh/jxkh.vue";

import yj_zygl_1 from "./spone/emergencyPlan/yj_zygl/yj_zygl_1.vue";
import yj_zygl_2 from "./spone/emergencyPlan/yj_zygl/yj_zygl_2.vue";

import yjya from "./spone/emergencyPlan/yjya/yjya_1.vue";
import yjsj from "./spone/emergencyPlan/yjsj/yjsj.vue";
import yjsj1 from "./spone/emergencyPlan/yjsj1/yjsj1.vue";
import yjsj2 from "./spone/emergencyPlan/yjsj2/yjsj2.vue";

import all from "./spone/projectManage/all/all.vue";
import plan from "./spone/projectManage/plan/plan.vue";
import summary from "./spone/projectManage/summary/summary.vue";
import xmkh from "./spone/projectManage/xmkh/xmkh.vue";
import assesment from "./spone/projectManage/assesment/assesment.vue";
import assesment_1 from "./spone/projectManage/assesment_1/assesment_1.vue";

import shen from "./spone/frontPage/shen/shen.vue";
import xu from "./spone/frontPage/xu/xu.vue";
import zhi from "./spone/frontPage/zhi/zhi.vue";
import jin from "./spone/frontPage/jin/jin.vue";
import yong from "./spone/frontPage/yong/yong.vue";
import pai from "./spone/frontPage/pai/pai.vue";
import { useFunc } from "@/hook/useFunc";

import gl from "@/assets/image/underGround/gl.png";
import sb from "@/assets/image/underGround/sb.png";
import project from "@/assets/image/underGround/project.png";
import warning from "@/assets/image/underGround/warning.png";
import sb_rain from "@/assets/image/underGround/sb_rain.png";
import sb_zd from "@/assets/image/underGround/sb_zd.png";
import sb_jll from "@/assets/image/underGround/sb_jll.png";

import front1 from "@/assets/image/label/font/font1.png";
import front2 from "@/assets/image/label/font/font2.png";
import front3 from "@/assets/image/label/font/font3.png";
import front4 from "@/assets/image/label/font/font4.png";
import front5 from "@/assets/image/label/font/font5.png";
import front6 from "@/assets/image/label/font/font6.png";
import front7 from "@/assets/image/label/font/font7.png";
import front8 from "@/assets/image/label/font/font8.png";

import axios from "axios";
import Mitt from "@/utils/mitt";
import { Plus } from "@element-plus/icons-vue";
import Dialog from "./spone/dialog/Dialog.vue";
let activeTab = ref(1);
const activeSelectValue = ref("1");
const labelVisible = ref(true);
const layerControlShow = ref(false);
const input = ref();
const homeOption = [
  { label: "汇水分区", value: "8" },
  { label: "湖泊", value: "1" },
  { label: "泵站", value: "5" },
  { label: "涵闸", value: "4" },
  { label: "提防", value: "7" },
];

const deviceOption = [
  { label: "雨量检测仪", value: "7" },

  { label: "液位检测仪", value: "1" },
  { label: "流量检测仪", value: "2" },
  { label: "水质水位监测", value: "5" },
  { label: "监控视频", value: "4" },
];
const getSeatchData = (activeItem: any) => {
  if (activeItem == 0) {
    return homeOption;
  } else if (activeItem == 1) {
    return [{ label: "项目分类", value: "1" }];
  } else if (activeItem == 2) {
    return deviceOption;
  }
};

watch(
  () => input.value,
  (newValue, oldValue) => {
    seatchData.value = [];
  }
);
const outLogin = () => {
  window.location.href =
    "http://www.hycim.com/agcloud-sso/authentication/require";
};
const seatchData = ref();
const searchGEO = () => {
  let localAPI;
  let params;
  const apiUrl = import.meta.env.VITE_SERVER_URL;
  if (activeItem.value == 0) {
    localAPI = "/cockpit/getSelectByName";
    params = {
      type: activeSelectValue.value,
      name: input.value,
    };
  } else if (activeItem.value == 1) {
    localAPI = "/build/getProjectInfo";
    params = {
      name: input.value,
    };
  } else if (activeItem.value == 2) {
    localAPI = "/build/getDeviceInfo";
  }

  axios
    .get(apiUrl + localAPI, {
      params: params,
    })
    .then((res) => {
      console.log(res, "resndjsndl");
      seatchData.value = res.data.data;
    })
    .catch((error) => {});
};
const jumpDetail = (item: any) => {
  const arr: any = getSeatchData(activeItem.value);

  const foundItem = arr.find((i: any) => i.value === activeSelectValue.value);
  console.log(arr, foundItem, "foundItem");

  useFunc().jumpDetail(item, foundItem.label);
};

//   [
//     {
//       img: sb_jll,
//       text: "径流量检测设备",
//       show: true,
//     },
//     {
//       img: sb_zd,
//       text: "浊度设备",
//       show: true,
//     },
//     {
//       img: sb_rain,
//       text: "雨水收集器",
//       show: true,
//     },
//     {
//       img: project,
//       text: "项目",
//       show: true,
//     },
//     {
//       img: sb,
//       text: "设备",
//       show: true,
//     },
//     {
//       img: warning,
//       text: "预警",
//       show: true,
//     },
//   ],
//   [
//     {
//       img: project,
//       text: "项目",
//       show: true,
//     },
//   ],
//   [
//     {
//       img: sb_jll,
//       text: "径流量检测设备",
//       show: true,
//     },
//     {
//       img: sb_zd,
//       text: "浊度设备",
//       show: true,
//     },
//     {
//       img: sb_rain,
//       text: "雨水收集器",
//       show: true,
//     },
//     {
//       img: sb,
//       text: "设备",
//       show: true,
//     },
//   ],
//   [
//     {
//       img: warning,
//       text: "预警",
//       show: true,
//     },
//   ],
// ]);
const labelListBar = ref([
  //首页
  [
    {
      label: "排水设施",
      value: [
        {
          img: front1,
          text: "泵站",
        },
        {
          img: front2,
          text: "提防",
        },
        {
          img: front3,
          text: "涵闸",
        },
      ],
    },
    {
      label: "管网",
      value: [
        {
          img: front4,
          text: "排水管网",
        },
        {
          img: front8,
          text: "给水管网",
        },
      ],
    },
    {
      label: "汇水分区",
      value: [
        {
          img: front5,
          text: "沿河抽排系统",
        },
        {
          img: front6,
          text: "沿江抽排系统",
        },
        {
          img: front7,
          text: "后官湖水系汇水区",
        },
      ],
    },
  ],
  [
    {
      label: "项目类型",
      value: [
        {
          img: new URL("@/assets/image/jianshe/legend_1.png", import.meta.url)
            .href,
          text: "污水收集完善",
        },
        {
          img: new URL("@/assets/image/jianshe/legend_2.png", import.meta.url)
            .href,
          text: "源头小区海绵体建设",
        },
        {
          img: new URL("@/assets/image/jianshe/legend_3.png", import.meta.url)
            .href,
          text: "面源污染控制",
        },
        {
          img: new URL("@/assets/image/jianshe/legend_4.png", import.meta.url)
            .href,
          text: "内涝治理及生态恢复",
        },
        {
          img: new URL("@/assets/image/jianshe/legend_5.png", import.meta.url)
            .href,
          text: "内涝防治",
        },
        {
          img: new URL("@/assets/image/jianshe/legend_6.png", import.meta.url)
            .href,
          text: "排水(污)工程项目",
        },
        {
          img: new URL("@/assets/image/jianshe/legend_7.png", import.meta.url)
            .href,
          text: "其他项目",
        },
      ],
    },
    {
      label: "污水处理厂",
      value: [
        {
          img: new URL("@/assets/image/jianshe/legend_8.png", import.meta.url)
            .href,
          text: "污水处理厂",
        },
      ],
    },
    {
      label: "积水点",
      value: [
        {
          img: new URL("@/assets/image/jianshe/legend_9.png", import.meta.url)
            .href,
          text: "积水点",
        },
      ],
    },
  ],
  [
    {
      label: "接入设备",
      value: [
        {
          img: new URL("@/assets/image/label/yunx/yunxin5.png", import.meta.url)
            .href,
          text: "雨量监测仪",
        },
        {
          img: new URL("@/assets/image/label/yunx/yunxin4.png", import.meta.url)
            .href,
          text: "液位监测仪",
        },
        {
          img: new URL("@/assets/image/label/yunx/yunxin3.png", import.meta.url)
            .href,
          text: "流量监测仪",
        },
        {
          img: new URL("@/assets/image/label/yunx/yunxin2.png", import.meta.url)
            .href,
          text: "流量监测仪",
        },
        {
          img: new URL("@/assets/image/label/yunx/yunxin1.png", import.meta.url)
            .href,
          text: "监控视频",
        },
      ],
    },
  ],
  [
    {
      label: "应急物资点",
      value: [
        {
          img: new URL("@/assets/image/label/yj/yj5.png", import.meta.url).href,
          text: "应急物资点",
        },
      ],
    },
    {
      label: "应急避难所",
      value: [
        {
          img: new URL("@/assets/image/label/yj/yj1.png", import.meta.url).href,
          text: "学校",
        },
        {
          img: new URL("@/assets/image/label/yj/yj2.png", import.meta.url).href,
          text: "公园",
        },
        {
          img: new URL("@/assets/image/label/yj/yj3.png", import.meta.url).href,
          text: "广场",
        },
        {
          img: new URL("@/assets/image/label/yj/yj4.png", import.meta.url).href,
          text: "体育场",
        },
      ],
    },
  ],
]);
const activeItem = ref(0);
const navList = [
  {
    title: "驾驶舱",
    componentList: [shen, xu, zhi, jin, pai, yong],
    bk: bar_01,
  },
  {
    title: "建设管理",
    componentList: [all, xmkh, plan, summary, assesment, assesment_1],
    bk: bar_02,
  },
  {
    title: "运行检测及评价",
    componentList: [sblx, sbyxzt, yjxx, jxkh, shjpj, ysly],
    bk: bar_03,
  },
  {
    title: "应急指挥",
    componentList: [yj_zygl_1, yj_zygl_2, yjya, yjsj, yjsj1, yjsj2],
    bk: bar_04,
  },
];
const activeNav: any = shallowRef(navList[0]);
const navCilck = (index: number) => {
  // labelList.value[index].map((item: any) => {
  //   item.show = true;
  // });
  // console.log("切换");
  getJsonData();
};
const searchValue = ref();
const formateDate = () => {
  let now1 = new Date();
  var hours = now1.getHours().toString().padStart(2, "0"); // 获取小时并确保是两位数
  var minutes = now1.getMinutes().toString().padStart(2, "0"); // 获取分钟并确保是两位数
  var seconds = now1.getSeconds().toString().padStart(2, "0"); // 获取秒钟并确保是两位数
  return hours + ":" + minutes + ":" + seconds;
};
// 格式化日期时间
const nowdate = ref("");
// var nowTime = hours + ":" + minutes + ":" + seconds;
const nowTime = ref("");
const weekday = ref("");
var weekdays = [
  "星期日",
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六",
];
const router = useRouter();
const store = useStore();
const w3d = new W3d();
let viewer = w3d.View;
// let projectInfo: Map<string, any> = new Map<string, any>();
// projectInfo.set("pipeGalaryName", "管廊名称");
// projectInfo.set("length", "管廊长度");
// projectInfo.set("material", "管廊材质");
// projectInfo.set("constructionMethod", "施工方法");
// projectInfo.set("onwerShipUnit", "权属单位");
// projectInfo.set("constructionUnit", "施工单位");
// projectInfo.set("surperviceUnit", "监理单位");
// projectInfo.set("startTime", "开工时间");
// projectInfo.set("endTime", "竣工时间");
// projectInfo.set("status", "状态");
const openPop = ref(false);
let entyImgMap: Map<string, any> = new Map<string, any>();
entyImgMap.set("工程", zhgl_gx);
entyImgMap.set("设施", zhgl_length);

const closeClick = () => {
  seatchData.value = [];
  activeSelectValue.value = "1";
  input.value = "";
  openPop.value = false;
  console.log(
    (document.getElementById as any)("stateShow").style.display,
    "displat"
  );

  (document.getElementById as any)("stateShow").style.display = "none";
  (document.getElementById as any)("device").style.display = "none";
};
const mapLoaded = ref(false);
const VITE_APP_jsonUrl = import.meta.env.VITE_APP_jsonUrl;
let jsonData = ref({});
function getJsonData() {
  axios.get(VITE_APP_jsonUrl).then((res) => {
    jsonData.value = res.data;
  });
  // useFunc()
  //   .getallData()
  //   .then((res) => {
  //     jsonData.value = res;
  //   });
}

getJsonData();

provide("jsonData", jsonData);

function addJSProject() {
  Mitt.emit("js-addProject");
}

onMounted(async () => {
  (document.getElementById as any)("stateShow").style.display = "none";

  setInterval(() => {
    nowTime.value = formateDate();
    var now = new Date();
    var year = now.getFullYear(); // 获取年份
    var month = now.getMonth() + 1; // 获取月份，月份是从0开始的，所以需要+1
    var day = now.getDate(); // 获取日
    nowdate.value = year + "-" + month + "-" + day;
    weekday.value = weekdays[now.getDay()];
  });
  console.log("onMounted");

  useFunc()
    .createMap("home")
    .then(() => {
      useFunc()
        .addpoint("home")
        .then(() => {
          console.log(store.getters["getmapTreel"], " treedatashouye");
          mapLoaded.value = true;

          //   labelList.value[0].forEach((item:any)=>{
          //   useFunc().controlByType(item.text,item.show)
          // })
        });
    });
});
onBeforeMount(async () => {
  let data = await useFunc().getallData();
  localStorage.setItem("jsonData", JSON.stringify(data));
  console.log(data, "jdmk");
});
const calcComponent = (num: number) => {
  return (activeNav.value.componentList as any)[num - 1];
};
</script>

<style scoped lang="scss">
.clopoptitle_close {
  cursor: pointer;
}
.searchData {
  position: absolute;
  width: 378px;
  max-height: 500px;
  overflow-y: auto;
  top: 294px;
  left: 4494px;
  z-index: 3;
  background-color: #032332;
}
.searchData_item {
  cursor: pointer;
  width: 100%;
  height: 50px;
  color: #fff;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  &:hover {
    background-color: rgba(41, 132, 197, 0.8);
  }
}
.contain {
  width: 7072px;
  height: 1560px;
  font-family: "OPPOSans-Regular";
  // overflow: hidden;
  position: relative;
}
#viewDiv {
  width: 100%;
  height: 100%;
  z-index: 1;
  position: relative;
}
#viewDiv2 {
  width: 7072px;
  height: 1560px;
  // z-index: 1;

  position: absolute;
}
.title {
  // top: -7px;
  width: 100%;
  height: 140px;
  background: url("../assets/image/underground/bigTitle.png");
  background-size: 100% 100%;
  padding-left: 80px;
  background-repeat: no-repeat;
  position: absolute;
  display: flex;
  z-index: 4;
  &_back {
    height: 46px;
    font-size: 26px;
    font-family: "OPPOSans";
    color: #03e6fe;
    margin-bottom: auto;
    margin-top: auto;
  }
  &_text {
    margin: auto;
    text-align: center;
    color: #fff;
    font-family: "旁门正道";
    font-size: 76px;
  }
  &_time {
    width: 1000px;
    text-align: center;
    color: #fff;
    display: flex;
    div {
      margin-bottom: auto;
      margin-top: auto;
      margin-left: 20px;
    }
  }
  &_backgd {
    cursor: pointer;
    width: 150px;
    height: 60px;
    background: url("../assets/image/svg/back-f051804b.png");
    background-size: 100% 100%;
  }
  &_backgd:hover {
    background: url("../assets/image/svg/back-hover-1019ffc7.png");
    background-size: 100% 100%; /* 可选：hover 时保持背景尺寸不变 */
  }
}
.other {
  // margin-top: 160px;
  // margin-bottom:88px;
  width: 2000px;
  height: 100%;
  background-color: #032332;
  //  height: 1312px;
  position: absolute;
  z-index: 3;
  padding: 160px 0 0 0;
}
.bottomNav {
  width: 3000px;
  height: 80px;
  position: absolute;
  bottom: 0;
  left: calc(50% - 1500px);
  background: url("../assets/image/underGround/bar_bk.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 2;
  display: flex;
  justify-content: center;
}
.bottomitem {
  width: 3000px;
  height: 160px;
  position: absolute;
  bottom: 0;
  left: calc(50% - 1500px);
  z-index: 2;
  display: flex;
  justify-content: center;
}

.itemActive {
  height: 50%;
  width: 150px;
  background-repeat: no-repeat;
  background-position: center; /* 背景图片居中显示 */
}
.Activetext {
  color: #5ce1ff;
  text-align: center;
  font-family: "旁门正道";
}
.UnActivetext {
  text-align: center;

  font-family: "旁门正道";
  color: rgba(166, 218, 223, 0.5); /* 选中时的字体颜色 */
}
.itemUnActive {
  margin-top: 40px;
  width: 150px;
  height: 50%;
  background-repeat: no-repeat;
  background-position: center; /* 背景图片居中显示 */
}
.map-overlay {
  width: 100%;
  height: 100%;
  left: 0;
  background: url("../assets/image/underground/bk_all.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.state {
  width: 500px;
  position: absolute;
  background-color: rgba(4, 55, 61, 0.8);
  z-index: 1;
}
.device_item {
  width: 40%;
  height: 100%;
  background-color: rgba(50, 162, 175, 0.8);
  color: #fff;
  font-size: 24px;
  text-align: center;
}

.device_item.active {
  border-bottom: 3px solid #03e6fe; /* Blue border on the bottom when active */
}

.poptitle {
  width: 100%;
  height: 50px;
  display: flex;
  font-size: 26px;
  color: rgba(255, 255, 255, 1);
  background: linear-gradient(
    to right,
    rgba(92, 225, 255, 1) 0%,
    rgba(92, 225, 255, 0) 100%
  );
  font-family: "优设标题黑";
  line-height: 50px;
  &_text {
    width: 94%;
    padding-left: 20px;
  }
}
.layerControl {
  position: absolute;
  width: 150px;
  height: 150px;
  top: 180px;
  left: 4900px;
  border-radius: 5px;
  z-index: 3;
  background-image: url("../assets/image/underGround/layerControl.png");
}
.search {
  position: absolute;
  width: 340px;
  height: 69px;
  top: 220px;
  left: 4500px;
  background-color: #30525f;
  z-index: 3;
  &_icon {
    width: 36px;
    height: 36px;
    margin-top: 15px;
  }
}
.seatchSelect {
  position: absolute;
  width: 200px;
  height: 66px;
  top: 220px;
  left: 4300px;
  background-color: #30525f;
  z-index: 3;
}
.layerList {
  position: absolute;
  width: 460px;
  // padding: 20px;
  top: 350px;
  left: 4600px;
  border-radius: 5px;
  background: url("../assets/image/svg/tc_bk.png") no-repeat center;
  background-size: 100% 100%;
  z-index: 4;
  &_item {
    width: 100%;
  }
}
.label {
  position: absolute;
  width: 324px;
  bottom: 50px;
  left: 4700px;
  border-radius: 5px;
  z-index: 3;
  background: rgba(29, 58, 68, 0.6) !important;
  &_title {
    background: linear-gradient(
      180deg,
      rgba(104, 207, 230, 0.5) 0%,
      rgba(92, 225, 255, 0) 100%
    );
    border-radius: 12px 12px 0px 0px;
    height: 73px;
    font-size: 28px;
    color: #fff;
  }
  &_icon {
    background: url("../assets/image/svg/down.png") no-repeat center;
    width: 26px;
    height: 26px;
  }
  &_iconup {
    background: url("../assets/image/svg/up.png") no-repeat center;
    width: 26px;
    height: 26px;
  }
  &_item {
    display: flex;
    line-height: 50px;
    height: 60px;
  }
  &_text {
    font-size: 20px;
    color: aqua;
    text-align: center;
    line-height: 50px;
  }
  &_textActive {
    font-size: 20px;
    color: #fff;

    text-align: center;
    line-height: 50px;
  }
}
.pop_distribute {
  padding-left: 20px;
}
.box {
  // border: #03e6fe solid 3px
  border: rgba($color: #03e6fe, $alpha: 0.5) solid 3px;
}
.active {
  // background-color: blue;
  color: white;
}
.inactive {
  background-color: white;
  color: black;
}
</style>
